<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery.js"></script>
<title>List Contact - A & B service</title>
<style>
#searchContact input[type=text]{
	margin-right: 3%;
	margin-left:  5%;
	width:25%;
}
#searchContact{
	border:1px solid black;
	padding-top:10px;
	padding-bottom:10px;
	width:98%;
	padding-left: 5%;
}
#resultTable th{
	background-color:	#D3D3D3;
}
#resultTable td{
	background-color:white;
	text-align:center;
	height:30px;
}

</style>
	<script type="text/javascript" src="js/jquery.windowmsg-1.0.js"></script>

	<script>
	 // don't forget this init!      
    $.initWindowMsg();
    
	</script>
	
   
</head>
<body>
<div style="width:95%;margin-left:2%">
<div id="searchContact">
<label>First name:</label>
<input type="text" id="firstName"/>
<label>Surname:</label>
<input type="text" id="surName"/>
</div>
<br />
<button id="search">Search Cotact</button>
<button id="noneButton">None</button>
<button>Clear</button>
<button id="createButton">Create</button>
<br />
<br />
<input type="checkbox" name="include" value="yes">Include in-active contact?
<br /><br />
<table id="resultTable" border="1" cellspacing="0" width="100%">
	<tr>
		<th width="30px">
		</th>
		<th>
			Contact Name
		</th>
		<th>
			Mobile Phone
		</th>
		<th>
			Email
		</th>
		<th>
			Contact Type
		</th>
		<th>
			Is Active?
		</th>
	</tr>
<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
</table>
<p>
<div id="page" style="position:relative;float:right;border:1px solid black;padding: 5px 5px;">
	 Page <input type="text" style="width:20px;" value="1" /> of 1 
</div>
<br />
<button id="selectButton">Select</button>
<button>Edit</button>
<button>Close</button>
</div>
<script>
	
	$("#search").click(function(){
		var firstName = $("#firstName").val();
		var surName = $("#surName").val();
		if(firstName) $("#resultTable").load("res.html");
		else alert("Khong co ket qua");
	});
	$("#noneButton").click(function(){
		window.close();
	});

      
       // upon click of a button, send corresponding text input value to parent window
       $('#selectButton').click(function(){
         //value = $('#in1').val();
         value = $("input[type=radio]:checked").val();
         alert(value);
         $.triggerParentEvent("resultContact", value);
         
         window.close();
       });
   		$("#createButton").click(function(){
   			window.open("AddContact.html","Add Contact","channelmode=1,width=600px,height=400px,resizable=no");
   		})
</script>
</body>
</html>